<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
	src="<%=basePath%>/resources/js/jquery-3.2.1.min.js"></script>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	border: 0px;
	top: 0px;
	left: 0px;
}
</style>
<script type="text/javascript">
	var td_size = 7;
	var td_id_pre = "td_id_";

	var my_date = {
		this_date : "",
		this_year : "",
		this_month : "",
		month_days : "",
		week_day : ""
	};
	$(function() {
		init_calendar();
	})
	function init_calendar() {
		init_my_date(new Date);
		init_calendar_plugin();
		
	}
	function init_calendar_plugin(){
		init_table();
		fillingDate();
	}
	function init_my_date(date) {
		my_date.this_date = date;
		my_date.this_year = date.getFullYear();
		my_date.this_month = date.getMonth() + 1;
		my_date.month_days = new Date(my_date.this_year, my_date.this_month, 0)
				.getDate();
		my_date.week_day = new Date(my_date.this_year, my_date.this_month - 1,
				1).getDay();
	}
	function fillingDate() {
		var week_day = new Date(my_date.this_year, my_date.this_month - 1, 1)
				.getDay();
		var flag = 0;
		for (var i = (my_date.week_day==0?0:my_date.week_day); i < my_date.month_days
				+ (my_date.week_day==0?0:my_date.week_day); i++) {
			flag++;
			var data_temp = $("#data_temp").clone(true);
			data_temp.attr("id", "data_" + flag);
			var day_div = data_temp.children("div").children("div").children(
					"div").children("p");
			day_div.attr("id", "day_" + flag);
			day_div.text(flag);
			$("#" + td_id_pre + i).append(data_temp);
		}
	}
	function init_table() {
		$("#calendar_tb tr").remove();
		var _tr = "<tr>"
			for (var j = 0; j < td_size; j++) {
				_tr += "<td style=\"position: relative; width: 30px; height: 30px;border: 1px; background-color: red;\">星期"+j+"</td>";
			}
			_tr += "</tr>"
			$("#calendar_tb").append(_tr);
		$("#this_month").text(my_date.this_year+"/"+my_date.this_month);
		var tr_size = Math.ceil((my_date.month_days +(my_date.week_day==0?0:my_date.week_day))
				/ td_size);
		var td_i = 0;
		for (var i = 0; i < tr_size; i++) {
			var tr = "<tr>"
			for (var j = 0; j < td_size; j++) {
				tr += "<td id=\""+td_id_pre+td_i+"\" style=\"position: relative; width: 30px; height: 30px;border: 1px; background-color: red;\"></td>";
				td_i++;
			}
			tr += "</tr>"
			$("#calendar_tb").append(tr);
		}
	}
	function last_month() {
		init_my_date(new Date(my_date.this_year,my_date.this_month-2,1));
		init_calendar_plugin();
	}
	function next_month() {
		init_my_date(new Date(my_date.this_year,my_date.this_month,1));
		init_calendar_plugin();
	}
</script>
</head>
<body>
	<div>
		<div
			style="position: relative; width: 227px; height: 50px;">
			<div style="position: absolute;width: 30px; height: 30px; left: 5px;" onclick="last_month()">
				<p style="font-size: 25px;">&lt;</p>
			</div>
			<div style="position: absolute;width: 65px; height: 30px; left: 70px;top: 10px;">
				<p style="font-size: 15px;" id="this_month">2017/06</p>
			</div>
			<div style="position: absolute;width: 30px; height: 30px; left: 192px;" onclick="next_month()">
				<p style="font-size: 25px;">&gt;</p>
			</div>
		</div>
		<div style="position: relative;">
			<div style="position: absolute;">
				<table>
					<tbody id="calendar_tb">
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div style="display: none;">
		<div style="position: absolute;" id="data_temp">
			<div style="position: relative;">
				<div style="position: absolute; width: 30px; height: 30px;">
					<div style="position: absolute; top: 8px; left: 8px;">
						<p style="font-size: 15px;" id="day">0</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>